
<template>
	<div class="bindJD-main">
		<div class="bindJD-main-show" v-if="!user||user.jingdongList.length<1||isEdit" >
			<div class="bindJD-msg">
				<div class="bindJD-msg-box">
					<!-- notice -->
					<div class="bindJD-notice">
						<a><img src="static/imgs/zhuyi.png" alt="" title=""/></a>
						<a>注意事项</a>
					</div>
					<!-- list -->
					<div class="bindJD-list">
						<p>1.输入京东用户名.注意不是昵称</p>
						<p>2.请确保收货地址和收货联系人真实具体，并保证和京东上下单的收货地址信息一致</p>
						<p>3.请确认多个京东号之间使用不同的收货信息(收货姓名,地址和电话均不同)</p>
						<p>4.账号审核人工进行,正常一个工作日内完成,只有审核通过的买号才能接受任务</p>
					</div>
				</div>
			</div>
			<!-- from -->
			<div class="bindJD-from clearfix">
				<div class="bindJD-from-ul">
					<ul>
						<li>
							<div class="bindJD-from-ul-cen">
								<div class="bindJD-from-ul-left">京东账户:</div>
								<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入京东账户" v-model="submit.acount"/></div>
							</div>
						</li>
						<li>
							<div class="bindJD-from-ul-cen">
								<div class="bindJD-from-ul-left">京东账户等级:</div>
                <div class="bindJD-from-ul-right">
                  <select v-model="submit.acountLevel" @change="levelChange">
                    <option v-for="(item,index) in level" :value="item.value">{{item.label}}</option>
                  </select>
                </div>
							</div>
						</li>
						<li v-if="false">
							<div class="bindJD-from-ul-cen">
								<div class="bindJD-from-ul-left">京享值:</div>
								<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入账号京享值"/></div>
							</div>
						</li>
						<li>
							<div class="bindJD-from-ul-cen">
								<div class="bindJD-from-ul-left">是否开通白条:</div>
                <div class="bindJD-from-ul-right">
                  <mt-radio flex="dir:left"
                            v-model="submit.baitiaoStart"
                            :options="baitiao">
                  </mt-radio></div>
							</div>
						</li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">收货人:</div>
                <div class="bindJD-from-ul-right"><input type="text" placeholder="请输入收货人姓名" v-model.trim="submit.receiver"/></div>
              </div>
            </li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">手机号:</div>
                <div class="bindJD-from-ul-right"><input type="text" placeholder="请输入收货人手机号" v-model.trim="submit.receiveMobile"/></div>
              </div>
            </li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">收货省份:</div>
                <div class="bindJD-from-ul-right" >
                  <select @change="provinceChange" ref="province">
                    <option v-for="item in area" :value="item.name">{{item.name}}</option>
                  </select>
                </div>
              </div>
            </li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">收货城市:</div>
                <div class="bindJD-from-ul-right">
                  <select @change="cityChange" ref="city">
                    <option v-for="item in cityOption" :value="item.name">{{item.name}}</option>
                  </select>
                </div>
              </div>
            </li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">收货地区:</div>
                <div class="bindJD-from-ul-right">
                  <select @change="areaChange" ref="area">
                    <option v-for="item in areaOption" :value="item">{{item}}</option>
                  </select>
                </div>
              </div>
            </li>
            <li>
              <div class="bindJD-from-ul-cen">
                <div class="bindJD-from-ul-left">详细地址:</div>
                <div class="bindJD-from-ul-right"><input type="text" placeholder="请输入详细地址" v-model="submit.receiveAddress"/></div>
              </div>
            </li>
						<li v-if="false">
							<div class="bindJD-from-ul-cen">
								<div class="bindJD-from-ul-left">标签:</div>
								<div class="bindJD-from-ul-right"><input type="text" placeholder="自动匹配标签" disabled="disabled"/></div>
							</div>
						</li>
					</ul>
				</div>
				<!-- upImg -->
        <div class="bindJD-from-upImg">
          <h4>上传图片</h4>
          <div class="from-upImg-ul">
            <ul>
              <li>
                <div class="from-upImg-box">
                  <div class="upImg-box-img">
                    <img :src="submit.myacountImg?imgUrl(submit.myacountImg):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                  <p>我的账户</p>
                </div>
                <input type="file" @change="upload(arguments,'myacountImg')"/>
              </li>
              <li>
                <div class="from-upImg-box">
                  <div class="upImg-box-img">
                    <img :src="submit.mysiteImg?imgUrl(submit.mysiteImg):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                  <p>我的主页</p>
                </div>
                <input type="file" @change="upload(arguments,'mysiteImg')"/>
              </li>
              <li>
                <div class="from-upImg-box">
                  <div class="upImg-box-img">
                    <img :src="submit.baitiaoImg?imgUrl(submit.baitiaoImg):'static/imgs/addtupian.png'" alt="" title=""/>
                  </div>
                  <p>开通花呗情况</p>
                </div>
                <input type="file" @change="upload(arguments,'baitiaoImg')"/>
              </li>
              <li v-if="false">
                <div class="from-upImg-box">
                  <div class="upImg-box-img">
                    <img src="static/imgs/addtupian01.png" alt="" title=""/>
                  </div>
                  <p>淘气值截图</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
			</div>
			<!-- look-link -->
			<div class="bindJD-look">查看图片绑定示例</div>
			<!-- clear -->
			<div class="clear"></div>
			<!-- notive -->
			<div class="bindJD-notice-msg">未通过审核的账号信息,可以直接修改提交</div>
			<!-- btn -->
			<!-- clear -->
			<div class="clear"></div>
      <div class="bindJD-btn" @click="submitInfo">提交审核</div>
		</div>
		<!-- huixian -->
		<div v-else>
			<div class="bankMain-yes">
				<div class="bankMain-yes-main" v-for="item in user.jingdongList">
					<div class="bankMain-bank">
						<div class="bankMain-yes-box">
							<span>
								<a><img src="static/imgs/jingDongH.png" alt="" title=""/></a>
								<a>{{item.acount}}</a>
							</span>
              <span class="bind-Jd-right-color" :style="{color:item.approve!==1?'red':''}">{{item.approveString}}</span>
						</div>
					</div>
					<!-- user-bank-msg -->
          <div class="bank-msg" v-show="controllers[item.id]">
            <div class="bankMain-yes-box">
              <ul>
                <li>
                  <a>联系人 :</a>
                  <a>{{item.receiver}}</a>
                </li>
                <li>
                  <a>收货地址 :</a>
                  <a>{{item.receiveProvince}}{{item.receiveCity}}{{item.receiveCountry}}{{item.receiveAddress}}</a>
                </li>
                <li>
                  <a>手机 :</a>
                  <a>{{item.receiveMobile}}</a>
                </li>
              </ul>
            </div>
          </div>
					<!-- btn -->
          <div class="bank-btn">
            <div class="bankMain-yes-box">
              <a @click="controllers[item.id]=!controllers[item.id]">{{controllers[item.id]?'隐藏':'显示'}}</a>
              <a @click="edit(item)">修改</a>
            </div>
          </div>
				</div>
				<!-- anniu -->
        <div class="new-bank-link" @click="addblank" v-if="user.taobaoList.length<1">新增一个淘宝 账户</div>
			</div>
		</div>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>


<script>
  import baseMixins from '../../mixins/base'
  import bindAccount from '../../mixins/bindAccount'
  export default{
    name:'bindTaoBao',
    data(){
      return {
        name:'京东',
        level:[
          {
            label:'注册会员',
            value:'注册会员'
          },{
            label:'铜牌会员',
            value:'铜牌会员'
          },{
            label:'银牌会员',
            value:'银牌会员'
          },{
            label:'金牌会员',
            value:'金牌会员'
          },{
            label:'钻石会员',
            value:'钻石会员'
          },{
            label:'PLUS会员',
            value:'PLUS会员'
          }
        ],
      }
    },
    created(){
      this.submit.level='注册会员'
    },
    watch:{
      'user.jingdongList':{
        immediate:true,
        handler(newVal){
          newVal.map((item)=>{
            if(!this.controllers[item.id]){
              this.$set(this.controllers,item.id,true)
            }
          })
        },
      },
    },
    mixins:[baseMixins,bindAccount],
  }
</script>

<style scoped>
	.bindJD-main{
		width: 100%;
		height: 100%;
		padding-bottom: 0.6rem;
	}
	.bindJD-msg{
		width: 100%;
		height: auto;
		background: white;
		padding-bottom: 0.05rem;
	}
	.bindJD-msg-box{
		width: 94%;
		margin: 0 auto;
	}
	.bindJD-notice{
		width: 100%;
		height: 0.35rem;
		line-height: 0.35rem;
	}
	.bindJD-notice a{
		display:inline-block;
		float:left;
		color: #333;
		font-size: 0.14rem;
	}
	.bindJD-notice a:first-child{
		width: 0.15rem;
		height: 0.15rem;
		margin: 0.1rem 0.05rem 0 0;
	}
	.bindJD-notice a:first-child img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.bindJD-list{
		width: 100%;
		height: 100%;
	}
	.bindJD-list p{
		width: 100%;
		color: #777;
		font-size: 0.12rem;
		line-height: 0.2rem;
		padding-bottom: 0.05rem;
	}
	.bindJD-from{
		width: 100%;
		height: auto;
		margin-top: 0.1rem;
	}
	.bindJD-from-ul{
		width: 100%;
		height: auto;
	}
	.bindJD-from-ul ul li{
		width: 100%;
		height: 0.42rem;
		float:left;
		background: white;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.bindJD-from-ul-cen{
		width: 90%;
		margin: 0 auto;
	}
	.bindJD-from-ul-left{
		float: left;
		line-height: 0.42rem;
		color: #333;
		font-size: 0.13rem;
	}
	.bindJD-from-ul-right{
		float:left;
	}
	.bindJD-from-ul-right input{
		width: 2rem;
		padding: 0.14rem 0 0.14rem 0.1rem;
		font-size: 0.13rem;
		float:left;
	}
	.bindJD-from-ul-right select{
		float: left;
		width: 1.5rem;
		height: 0.25rem;
		font-size: 0.14rem;
		box-sizing: border-box;
		margin: 0.1rem 0 0 0.13rem;
	}
	.bindJD-from-upImg{
		width: 100%;
		height: auto;
		float: left;
		background: white;
	}
	.bindJD-from-upImg h4{
		width: 90%;
		margin: 0.1rem auto 0 auto;
		font-weight: inherit;
		color: #333;
		font-size: 0.13rem;
	}
	.from-upImg-ul{
		width: 100%;
		height: auto;
		margin-top: 0.15rem;
	}
	.from-upImg-ul ul{
		width: 90%;
		margin: 0 auto;
	}
	.from-upImg-ul ul li{
		width: 50%;
    position: relative;
		float: left;
		height: 0.96rem;
	}
  .from-upImg-ul  li input{
    position: absolute;
    width: 100%;
    height: 0.96rem;
    background: transparent;
    opacity: 0;
    top:0;
    left:0
  }
	.from-upImg-box{
		width: 50%;
		margin: 0 auto;
	}
	.upImg-box-img{
		width: 0.64rem;
		height: 0.64rem;
	}
	.upImg-box-img img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.from-upImg-box p{
		color: #333;
		font-size: 0.12rem;
		margin-top: 0.05rem;
	}
	.bindJD-look{
		width: 100%;
		height: 0.3rem;
		line-height: 0.3rem;
		background: white;
		text-align: center;
		color: #0c92f3;
		font-size: 0.12rem;
		margin: 0.1rem 0;
	}
	.bindJD-notice-msg{
		text-align: center;
		color: #4097FF;
		font-size: 0.12rem;
		margin-bottom: 0.1rem;
		overflow: hidden;
	}
	.bindJD-btn{
		width: 90%;
		margin: 0 auto;
		background: rgb(142,10,190);
		height: 0.33rem;
		line-height: 0.33rem;
		text-align: center;
		color: white;
		font-size: 0.12rem;
		border-radius: 0.05rem;
	}
	.bankMain-yes-main .bind-Jd-right-color{
		float:right;
		color: #0C92F3;
		font-size: 0.14rem;
	}
</style>
<style lang="stylus" scoped>
  @import "../../assets/stylus/bind.styl"
</style>
